<template>
    <t-adaptive-page :opts="opts" @submit="conditionEnter" isCopy :table="state.table" :columns="state.table.columns"
        @selection-change="selectionChange" @size-change="handlesSizeChange" @page-change="handlesCurrentChange">
        <template #operName="{ scope }">{{ scope.row.operName }}</template>
        <template #toolbar>
            <el-button size="default" type="danger">批量补存</el-button>
            <el-button size="default" type="danger">批量重存</el-button>
        </template>
    </t-adaptive-page>
</template>

<script setup lang="tsx" name="Portal">
import tableData from "./tableData.json"

const state: any = reactive({
    queryData: {
        MDcardNum: null, // 诊疗卡号
        name: null, // 患者姓名
        requestNum: null, // 申请单号
        project: null, // 检查项目
        department: null, // 申请科室
        type: null, // 检查类型
        checkDate: null, // 检查日期
        approvedDate: null, // 审核日期
        status: null, // 影像状态
    },
    table: {
        currentPage: 1,
        pageSize: 20,
        total: 0,
        firstColumn: [{ type: "selection", fixed: true }],
        // 接口返回数据
        data: [],
        // 表头数据
        columns: [
            {
                prop: "reportStatus",
                label: "报告上传状态",
                minWidth: 100,
                fixed: true,
                render: (text: any) => {
                    let type = "";
                    let val = "";
                    switch (text) {
                        case 0:
                            type = "warning";
                            val = "未上传";
                            break;
                        case 1:
                            type = "danger";
                            val = "上传失败";
                            break;
                        case 2:
                            type = "success";
                            val = "已上传";
                            break;
                        case 3:
                            type = "info";
                            val = "上传中";
                            break;
                    }
                    return <el-tag type={type}>{val}</el-tag>;
                }
            },
            {
                prop: "imageStatus",
                label: "影像上传状态",
                minWidth: 100,
                fixed: true,
                render: (text: any) => {
                    let type = "";
                    let val = "";
                    switch (text) {
                        case 0:
                            type = "warning";
                            val = "未上传";
                            break;
                        case 1:
                            type = "danger";
                            val = "上传失败";
                            break;
                        case 2:
                            type = "success";
                            val = "已上传";
                            break;
                        case 3:
                            type = "info";
                            val = "上传中";
                            break;
                    }
                    return <el-tag type={type}>{val}</el-tag>;
                }
            },
            {
                prop: "requestNo",
                label: "申请单号",
                minWidth: 130,
                fixed: false,
                sort: true,
                renderHeader: (row: any) => {
                    return (
                        <span class="label-title">
                            <span class="label">{row.label}</span>
                            <div class="caret-wrapper arrow">
                                <el-icon
                                    style={{ color: row.fixed ? "#1890ff" : "#888888" }}
                                    onClick={(event: any) => {
                                        handleClick(row);
                                        event.stopPropagation();
                                    }}
                                >
                                    {row.fixed ? <Lock /> : <Unlock />}
                                </el-icon>
                            </div>
                        </span>
                    )
                }
            },
            { prop: "checkNum", label: "检查编号", minWidth: 100 },
            { prop: "MDcardNum", label: "诊疗卡号", minWidth: 100 },
            { prop: "name", label: "姓名", minWidth: 100 },
            { prop: "department", label: "开单科室", minWidth: 130 },
            { prop: "doctor", label: "开单医生", minWidth: 100 },
            { prop: "project", label: "检查项目", minWidth: 130 },
            { prop: "type", label: "检查类型", minWidth: 100 },
            { prop: "checkDate", label: "检查日期", minWidth: 130 },
            { prop: "approvedDate", label: "审核日期", minWidth: 130 }
        ],
        operator: [
            {
                text: "补传报告",
                noshow: [{ key: "imageStatus", val: [1, 2, 3] }, { key: "reportStatus", val: [1, 2, 3] }],
                bind: {
                    color: "#626aef",
                    text: false,
                    link: false,
                }
                // fun: edit
            },
            {
                text: "重传报告",
                noshow: [{ key: "imageStatus", val: [0, 3] }, { key: "reportStatus", val: [0, 3] }],
                bind: {
                    color: "#626aef",
                    text: false,
                    link: false,
                }
                // fun: edit
            },
            {
                text: "暂停上传",
                noshow: [{ key: "imageStatus", val: [0, 1, 2] }, { key: "reportStatus", val: [0, 1, 2] }],
                bind: {
                    color: "#626aef",
                    text: false,
                    link: false,
                }
                // fun: edit
            }
        ],
        // 操作列样式
        operatorConfig: {
            fixed: "left", // 固定列表右边（left则固定在左边）
            align: "center",
            width: "180",
            label: "操作"
        }
    },
    listTypeInfo: {
        status: [
            { label: "未上传", key: "W1" },
            { label: "已上传", key: "W2" },
            { label: "上传中", key: "W3" },
            { label: "上传失败", key: "W4" }
        ],
        project: [
            { label: "胸部SCT平扫", key: "W1" },
            { label: "胸椎磁共振平扫(3T)", key: "W2" },
            { label: "上腹部（肝胆）SCT平扫", key: "W3" },
            { label: "颈部SCT平扫", key: "W4" },
            { label: "彩超（子宫附件、经腹）", key: "W5" },
        ],
        department: [
            { label: "内分泌科", key: "W1" },
            { label: "骨科", key: "W2" },
            { label: "内科", key: "W3" },
            { label: "儿科", key: "W4" },
            { label: "妇科", key: "W5" }
        ],
        type: [
            { label: "CT", key: "W1" },
            { label: "MR", key: "W2" },
            { label: "彩超", key: "W3" }
        ]
    }
})

const opts = computed(() => {
    return {
        MDcardNum: {
            label: "诊疗卡号",
            comp: "el-input"
        },
        name: {
            label: "患者姓名",
            comp: "el-input"
        },
        requestNum: {
            label: "申请单号",
            comp: "el-input"
        },
        project: {
            label: "检查项目",
            comp: "t-select",
            defaultVal: "",
            isSelfCom: true,
            bind: {
                optionSource: state.listTypeInfo.project
            }
        },
        department: {
            label: "申请科室",
            comp: "t-select",
            defaultVal: "",
            isSelfCom: true,
            bind: {
                optionSource: state.listTypeInfo.department
            }
        },
        type: {
            label: "检查类型",
            comp: "t-select",
            defaultVal: "",
            isSelfCom: true,
            bind: {
                optionSource: state.listTypeInfo.type
            }
        },
        checkDate: {
            label: "检查日期",
            comp: "t-date-picker",
            span: 1,
            bind: {
                type: "date"
            }
        },
        approvedDate: {
            label: "审核日期",
            comp: "t-date-picker",
            span: 1,
            bind: {
                type: "date"
            }
        },

        status: {
            label: "上传状态",
            comp: "t-select",
            defaultVal: "",
            isSelfCom: true,
            bind: {
                optionSource: state.listTypeInfo.status
            }
        }
    }
})

// 最终参数获取
const getQueryData = computed(() => {
    const { MDcardNum, name, requestNum, project, department, type, checkDate, approvedDate, imageStatus, reportStatus } = toRefs(state.queryData)
    return {
        MDcardNum: MDcardNum.value,
        name: name.value,
        requestNum: requestNum.value,
        project: project.value,
        department: department.value,
        type: type.value,
        checkDate: checkDate.value,
        approvedDate: approvedDate.value,
        imageStatus: imageStatus.value,
        reportStatus: reportStatus.value,
        pageNum: state.table.currentPage,
        pageSize: state.table.pageSize
    };
})
// 点击表头固定按钮
function handleClick(row: any) {
    row.fixed = !row.fixed
}
// 点击查询按钮
const conditionEnter = (data: any) => {
    state.queryData = data
    console.log("最终参数", getQueryData.value)
    getData()
}
// 复选框选中
const selectionChange = (data: any[]) => {
    console.log("复选框选中", data)
    state.ids = data.map((item: { operId: any }) => item.operId)
}
// 页面大小
const handlesSizeChange = (val: any) => {
    state.table.pageSize = val
    getData()
}
// 页码
const handlesCurrentChange = (val: any) => {
    state.table.currentPage = val
    getData()
}
// 获取表格数据
const getData = async () => {
    let res = await tableData
    if (res.success) {
        state.table.data = res.table.data.slice((state.table.currentPage - 1) * state.table.pageSize, state.table.pageSize * state.table.currentPage)
        state.table.total = res.table.data.length
    }
}

// const getSummaries = (param: any) => {
//     console.log('param', param)
//     const { columns, data } = param
//     const res = tableData
//     const sums: any[] = [];
//     columns.forEach((column: any, index: any) => {
//         if (index === 0) {
//             sums[index] = "总价";
//             return;
//         }
//         const values = res.table.data.map((item: any) => Number(item[column.property]))
//         if (
//             column.property === "sum" ||
//             column.property === "tax" ||
//             column.property === "total"
//         ) {
//             const totalValue = values.reduce((prev, curr) => {
//                 const value = Number(curr);
//                 if (!isNaN(value)) {
//                     return prev + value;
//                 } else {
//                     return prev;
//                 }
//             }, 0);
//             sums[index] = totalValue
//                 .toFixed(2)
//                 .toString()
//                 .replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g, "$&,")
//         } else {
//             sums[index] = ""
//         }
//     });
//     return sums
// }

onMounted(() => {
    getData()
})
</script>